title = "产品详情页"
url = '/:slug|[a-z0-9\-]+-p-\d+.html$'
title = '产品内容页模板'
layout = 'default-y'
==
use Jason\Ccshop\Classes\Helper;
use Jason\Ccshop\Models\Category;
function onStart(){
    $maxCatePoint = 0;
	$slugArr = explode('-', str_replace('.html', '', $this->param('slug')));
	$id = array_pop($slugArr);
	$condition = ['id'=>$id];
	$product = App::make('Jason\Ccshop\Controllers\Products')->getProduct($condition);
	if ($product) {
        if(get('preview')!='true'){
          if($product['status'] != 'instock'){
            if($product['status'] != 'stockout'){
            return redirect('/404');
             }       
           } 
        } 
        $this['wishlistClass']='';
        //$this['is_user_wish'] = false;
        if($this->user){
           $is_user_wish = Illuminate\Support\Facades\DB::table('cc_wishlists')->where(['uid'=>$this->user->id,'product_id'=>$product['id']])->select('id')->get();
           if($is_user_wish){
             $this['wishlistClass']='active';
             //$this['is_user_wish'] = true;
           }
        }
        //若产品特色图片小于5个，使用产品内容里面的图片作为特产图片
        $featureImageCount = count($product['feature_image']);
        if($featureImageCount < 5){
            preg_match_all('/<\s*img\s+[^>]*?src\s*=\s*(\'|\")(.*?)\\1[^>]*?\/?\s*>/i',$product['content'], $match);
            $contentImages = isset($match[2]) ? $match[2] : [];
            if(!empty($contentImages)){
                foreach($contentImages as $contentImage){
                    if(stripos($contentImage,'.png')===false){
                        $product['feature_image'][] = ['title' => '', 'path' => $contentImage];
                    }
                    if(count($product['feature_image'])==5){
                         break;
                    }
                }
            }
        }
		$this['product'] = $product;
	} else {
		return redirect('/404');
	}

}
==
{% set reviews = catalog.getReviews(product.id) %}
{% set maxCatePoint = catalog.getMaxPoint(product.id) %}
<div class="product_cont">


	<div class="product_swiperBox">
		<div class="swiper-container product_swiper">
		    <div class="swiper-wrapper">
		    {% for key, img in product.feature_image %}
		        <div class="swiper-slide"><a href="#image{{ loop.index }}"><img src="{{ img.path }}" alt=""></a></div>
	        {% endfor %}

		    </div>
		    <!--  -->
		    <div class="swiper-pagination swiper-pagination-black"></div>
		    <!--  -->
		    <div class="swiper-button-prev"></div>
		    <div class="swiper-button-next"></div>
		</div>
	</div>
	<form action="#" method="post" id="product_addtocart_form">

		<div class="productPriceBox">
			<p class="title">{{ product.name }}</p>
			<div class="price" style="position: relative;"><span class="colorBlue2">{{ product.price|formatPrice }}</span>（税込）
				<s style="color: #999;font-weight: 500;">{{ product.list_price |formatPrice }} （税込）</s> 
				<br>
                <!--  -->
                <div class="availability {% if product.status == 'instock' %}in-stock{% else %}out-of-stock{% endif %}">
                    <span>{{ ('jason.ccshop::lang.product.status.' ~ product.status)|trans }}</span>

                </div>
			</div>
            <p style="font-size: 14px;overflow: hidden;">
                <span class="fl listPorint_ sale{{ maxCatePoint }}" style="padding-right: 10px;margin-left: 20px;">ポイント{{ maxCatePoint }}倍: {{ getProductPoint(product.id) }}</span>
                {% if product.discount %}
                    {% if product.discount >= 30 %}
                        <span class="fl listPorint_ bgBlue2" style="margin-left: 15px;padding: 0 10px;">
                            {{ product.discount }} OFF
                        </span>
                    {% endif %}
                {% endif %}
            </p>
			<div class="sizeChange">
				{% for option in product.options %}

					<div class="btnGhost _addInput_unit">


		            	<span>{{ option.name }}:  <span id="name-text"></span> </span>

		              	<div class="proRadioWrap" id="input-color">
		              		{% if option.values is iterable %}
		              			{% for val in option.values %}
		              				<label class="">
				                        <input type="radio" name="ProductOption[{{ option.id }}]" class="radio_common_icon" checked="" value="{{val.id}}">

				                        {% if val.thumb.path %}
				                            <span style="display:block;">
				                            	<img width="40" src="{{ val.thumb.path }}" alt="{{val.name}}" title="{{val.name}}" style="display:block;">
				                          </span>
				                        {% else %}
				                        <span>{{val.name}}</span>
				                        {% endif %}
				                    </label>
		              			{% endfor %}
		              		{% endif  %}

		                 </div>
		        	</div>

				{% endfor %}


	            <div class="_decision_number_box">
					<div class="_size_head _head"><span>個数</span></div>
					<div class="_ul_box _number_ul_box">
				      	<div class="add-to-cart fl">
				          	<div class="custom pull-left">
				              	<button onclick="var result = document.getElementById('qty'); var qty = result.value; if( !isNaN( qty ) &amp;&amp; qty > 1 ) result.value--;return false;" class="reduced items-count" type="button"><i class="">-</i></button>
				              	<input type="text" class="input-text qty" title="Qty" value="1" maxlength="12" id="qty" name="qty">
				              	<button onclick="var result = document.getElementById('qty'); var qty = result.value; if( !isNaN( qty )) result.value++;return false;" class="increase items-count" type="button"><i class="">+</i></button>
				          	</div>
				      	</div>
                        {% if product.custom_fields['wish_total'] %}
                            <button class="wishNum fl {{wishlistClass}}" data-request="onAddToWishlist"
                            data-request-data="key: {{ product.id }}">{{  product.custom_fields['wish_total']}}</button>
                            {% else %}
                            <button class="wishNum fl {{wishlistClass}}" data-request="onAddToWishlist"
                            data-request-data="key: {{ product.id }}"></button>
                        {% endif %}
				  	</div>
				</div>
                <p class="mt10" style="color: #ef98a8;"><b>※≥5点送料無料</b></p>
				<div class="add-to-cartBox">
					{% if product.status == 'instock' %}
					 <input type="hidden" name="product" id="pid" value="{{ product.id }}">
					<p><button class="addToCartBtn blueBtn1" data-request="onAddToCart"
					data-request-data="product:{{ product.id }}"
					data-request-loading="#loading"
					data-request-redirect="{{ ''|page }}">
                        <img src="{{ 'assets/img/nav/mybag_w.png'|theme }}" style="display: inline-block;width: 19px;height: auto;margin-right: 5px;" alt="">カートに入れる
                    </button></p>
					{% else %}
					<p><button class="addToCartBtn blueBtn1" disabled><img src="{{ 'assets/img/nav/mybag_w.png'|theme }}" style="display: inline-block;width: 19px;height: auto;margin-right: 5px;" alt="">在庫切れ</button></p>
					{% endif %}
				</div>
			</div>

		</div>
	</form>
	<div id="productReviews"  style="">
		 <ul class="box_list text_switch">
            <li class="flatTab_navList flatTab_navList_box box_list_main active">
                <a class="flatTab_navList_link" href="javascript:;">
                    <div class="flatTab_navList_inner">商品詳細</div>
                </a>
            </li>
            <li class="flatTab_navList flatTab_navList_box box_list_main">
                <a class="flatTab_navList_link" href="javascript:;">
                    <div class="flatTab_navList_inner">レビュー（{{ reviews.total }}）</div>
                </a>
            </li>
        </ul>
        <div class="productInfo">
            <p class="mt10">*モニターの環境によって実物と色が違って見える場合があります</p>
            <p class="mt10">*測り方によって、1～3ｃｍほどの誤差が生じる可能性があります</p>
            <p style="margin: 5px 0;"><b>商品説明：</b></p>
            <table>
                <tbody>                    
                    {% for key, f in product.features %}
                        <tr>
                            <td>{{ f.name }}</td>
                            <td>{{ f.value_name }}</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        <div class="flatTab_contents">
			<div class="productReviewsCont" style="display: block;">
				{{ product.content|raw }}
			</div>
			<div class="productReviewsCont">
                <div class="reviewArea">
                    <div class="reviewArea_header clearfix">
                        <div class="fl">
                            総合評価
                            <span class="avg">
                                <span class="reviewStar size2 star{{ reviews.rating_stat.avg | round }} mr10" style="top:0;"></span>
                            </span>
                        </div>
                        <div class="fr cnt">
                            <span class="fwb">({{ reviews.total }})</span>
                            レビュー
                        </div>
                    </div>
                    <div class="_tabArea">
                        <ul class="reviewFlatTab">
                            <li class="reviewFlatTab_item _tab _selected">
                                <a href="#reviewComment" class="reviewFlatTab_itemInner">コメント</a>
                            </li>
                            <li class="reviewFlatTab_item _tab">
                                <a href="#reviewSize" class="reviewFlatTab_itemInner">レビューを書く</a>
                            </li>
                        </ul>
                        <div class="_contents _selected pt10" id="reviewComment">
                            <ul class="list_product_review">
                                {% for key, review in reviews %}
                                <li class="item clear">
                                    <div class="pingl">
                                        <p>
                                            <img src="{{ 'assets/img/defaultUser.png'|theme }}" style="width:20%;"> 
                                            {{ getReviewsName(review.name) }}
                                        </p>
                                        <p>{{ review.created_at | date("m/d/Y") }}</p>
                                    </div>
                                    <div class="pingr">
                                        <!-- <p><span class="fwb">{{ review.title }}！</span></p> -->
                                        <p><span class="reviewStar size1 star{{ review.rating | round }}"></span></p>
                                        <p>{{ review.content }}</p>
                                        <p class="reviewImgBox">
                                        {% for  key, image in review.images %}
                                            {% if key < 3 %}
                                                <img class="reviewImg_img" src="{{ image.getPath(200,200,{'mode':'crop'}) }}" alt="{{ review.title }}" style="width:20%;display: inline-block;margin-right:2%;">
                                            {% endif %}
                                        {% endfor %}
                                        </p>
                                    </div>
                                </li>
                                {% endfor %}
                            </ul>
                            {{ reviews.fragment('reviews').render()|raw }}
                        </div>
                        {{ form_ajax('onPushReview') }}
                        <input type="hidden" name="product" value="{{ product.id }}">
                        <input type="hidden" name="name" value="{{ user.name }}">
                        <input type="hidden" name="title" value="レビュー">
                        <input type="hidden" class="input-text required-entry" value="4" id="rating_rank" name="rating">
                        <div class="_contents reviewDataTabContents" id="reviewSize">
                            <div class="reviewContentsTitle">
                                この商品はいかがでしたか？
                                <span id="score">
                                    <a name="1" class="reviewStar size4"></a>
                                    <a name="2" class="reviewStar size4"></a>
                                    <a name="3" class="reviewStar size4"></a>
                                    <a name="4" class="reviewStar size4"></a>
                                    <a name="5" class="reviewStar size4"></a>
                                </span>
                            </div>
                            <div class="submitReview">
                                <label class="ipass">商品レビュー本文<span class="force_color">*</span></label>
                                <textarea class="required-entry" rows="3" cols="5" id="review_field" name="content"></textarea>
                                {% if user.email %}
                                <button class="button_decide mt10" title="Submit Review" type="submit">
                                    <span class="button_txt">レビューを投稿する</span>
                                </button>
                                {% else %}
                                <a class="button_decide mt10" href="{{ 'account/login'|page }}" style="background:#8c8c8c;border:1px solid #8c8c8c;">
                                    <span class="button_txt">登録する後で、レビューを投稿する</span>
                                </a>
                                {% endif %}
                            </div>
                        </div>
                        {{ form_close() }}
                    </div>
                </div>
            </div>
        </div>
	</div>


	<div class="productRecommen">

		{% partial 'catalog/product-recommend' pid=product.id code="product-related" %}
		{% partial 'catalog/product-history' %}


	</div>
</div>

<div id="bagImg_box_ev"></div>
<style type="text/css">
    #bagImg_box_ev{position:fixed;left:0;top:0;width:100%;height:100%;z-index:999;display:none}
    #bagImg_box_ev .bagImg_box_swiper{width:100%;height:100%}
    #bagImg_box_ev .swiper-wrapper .swiper-slide>div{height:100%;width:100%;background:#000;display:-webkit-flex;-webkit-align-items:center}
    #bagImg_box_ev .swiper-wrapper .swiper-slide>div img{width:100%}
    #bagImg_box_ev .swiper-pagination-bullet{background:#fff!important}
</style>
{% put scripts %}
<script>
$(function(){
    /*pingjia datu big img*/
    $("#bagImg_box_ev").height($(window).height());
    var bagImg_box_swiper = null;
    $(".list_product_review").find(".reviewImgBox .reviewImg_img").click(function(){
        var idx = $(this).index();
        var swipersliderHtml = "";
        $("#bagImg_box_ev").show();
        // $("._conver").show();
        $(this).parent().find(".reviewImg_img").each(function(i,item){
            var imgSrc = item.src;
            swipersliderHtml  += `<div class="swiper-slide">\
                            <div><img src="${imgSrc}"></div>\
                        </div>`
        })
        var swiperBoxHtml = `<div class="swiper-container bagImg_box_swiper">\
                            <div class="swiper-wrapper">${swipersliderHtml}</div>\
                            <div class="swiper-pagination"></div>\
                        </div>`;
        $("#bagImg_box_ev").html(swiperBoxHtml);
        bagImg_box_swiper = new Swiper ('.bagImg_box_swiper', {
            direction: 'horizontal',
            loop: false,
            pagination: '.swiper-pagination',
        })
        bagImg_box_swiper.slideTo(idx);
        $("#bagImg_box_ev").click(function(){
            $("#bagImg_box_ev").hide();
            // $("._conver").hide();
            bagImg_box_swiper = null;
            $("#bagImg_box_ev").find(".bagImg_box_swiper").remove()
        })
    });
    $("#productReviews").find("table").attr("width","100%");
})
    // Star rating
    var GradList = document.getElementById("score").getElementsByTagName("a");
    for(var i=0;i < GradList.length;i++){
        GradList[i].onmouseover = function(){
            for(var Qi=0;Qi<GradList.length;Qi++){
                GradList[Qi].className = 'reviewStar size4';
            }
            for(var Qii=0;Qii<this.name;Qii++){
                GradList[Qii].className = 'reviewStar size4 star1';
            }
            $("#rating_rank").val(Qii); 
        }
    }

    /*隐藏高度过高图片*/
    $(".product_swiperBox").find(".swiper-slide img").each(function(i,item){
        var img = new Image();
        img.src = $(item).attr("src");
         var intv = window.setInterval(function(){
            if(img.complete){
                var imgHeight = img.height;
                var imgWidth = img.width;
                if( Math.abs(1-imgWidth/imgHeight) > 0.4 ){
                    $(item).parents(".swiper-slide").remove()    
                }
                clearInterval(intv);
            }
        }, 5);
    })
    var t = setTimeout(function(){  //为了删除过高图片延迟执行，无奈之举
        var mySwiper3 = new Swiper ('.product_swiper', {  //product
            direction: 'horizontal',
            loop: false,
            autoplay:5000,
            autoHeight: true,
            pagination: '.swiper-pagination',
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
        })
    },300)

    $(".wishNum").bind("click",function(){
        if(!$(this).hasClass("active")){
            $(this).addClass("active")
        }
    })
</script>
{% endput %}
<!-- Facebook Pixel Code -->
<script>
	!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
	n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
	n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
	t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
	document,'script','https://connect.facebook.net/en_US/fbevents.js');
	fbq('init', '125718844809609');
	fbq('track', 'PageView');
	fbq('track', 'ViewContent');
</script>
<noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=125718844809609&ev=PageView&noscript=1"/></noscript>
<!-- DO NOT MODIFY -->
<!-- End Facebook Pixel Code -->


<script type="text/javascript">
var google_tag_params = {
    ecomm_prodid: {{product.id}},
    ecomm_pagetype: "product",
    ecomm_totalvalue: {{product.price|ratePrice}}
};
</script>
